// 一个基于swiper的图片或视频预览工具
import './index.css';
import Swiper from 'swiper';
import 'swiper/css/swiper.css';
import layer from 'utils/js/layer-mobile';

const container = document.createElement('div');
container.id = 'swiper-previewImage';
container.className = 'swiper-container';
const wraper = document.createElement('div');
wraper.className = 'swiper-wrapper';
wraper.style.opacity = 0;
container.appendChild(wraper);
document.body.appendChild(container);
let video, swiper;

// 隐藏swiper
var hideSwiper = function () {
  container.style.display = 'none';
  wraper.style.opacity = 0;
  wraper.innerHTML = '';
  swiper.destroy();
  swiper = null;
};

// container事件代理
container.addEventListener('click', function (e) {
  let t = e.target;
  switch (t.className) {
    case 'controls':
      video = t.previousElementSibling; // .controls下面的视频
      if (video.src) { // 懒加载已完成，控制视频的播放和暂停
        video.paused ? video.play() : video.pause();
      } else { // 懒加载未完成
        layer.msg('正在缓冲，请稍等...');
      }
      break;
    case 'swiper-zoom-container img':
    case 'close':
      hideSwiper();
      break;
    default:
      if (t.parentNode.className == 'swiper-zoom-container img') hideSwiper();
  }
});

// 暴露接口
export default function (srcs, current, params) { // current 为当前src或当前索引, params同swiper的params
  var system = params && params.system;
  // 初始化swiper
  wraper.innerHTML = srcs.map(function (src) {
    if (src.match(/\.(webm|mp4|ogg|mov)(\?.*)?$/i)) { // 如果是视频
      return (
        '<div class="swiper-slide">' +
        '<div class="swiper-zoom-container video">' +
        '<video' + (system == 'android' ? ' style="height:85%;"' : '') + ' poster="' + src + '" x5-playsinline="true" x-webkit-airplay="true" playsinline="true" webkit-playsinline="true"' + ' data-src="' + src + '" class="swiper-lazy"></video>' +
        '<div class="controls"><span class="close"></span><span class="pause"></span></div>' +
        '<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>' +
        '</div>' +
        '</div>'
      );
    } else { // 如果是图片
      return (
        '<div class="swiper-slide">' +
        '<div class="swiper-zoom-container img">' +
        '<img data-src="' + src + '" class="swiper-lazy">' +
        '<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>' +
        '</div>' +
        '</div>'
      );
    }
  }).join('');

  // 显示container
  container.style.display = 'block';

  // Swiper实例
  swiper = new Swiper(container, {
    zoom: true,
    lazy: {
      loadOnTransitionStart: true
    },
    on: {
      slideChangeTransitionEnd: function () {
        video && !video.paused && video.pause();
      }
    },
    ...params
  });

  // 视频播放和暂停监听
  let videos = wraper.getElementsByTagName('video');
  Array.prototype.forEach.call(videos, v => {
    let pause = v.parentNode.getElementsByClassName('pause')[0];
    let close = v.parentNode.getElementsByClassName('close')[0];
    v.addEventListener('play', function () {
      pause.classList.add('out');
      if (system != 'android') close.classList.add('out');
    });
    v.addEventListener('pause', function () {
      pause.classList.remove('out');
      if (system != 'android') close.classList.remove('out');
    });
  });

  // 显示swiper
  let idx = typeof current == 'number' ? current : srcs.indexOf(current);
  if (idx != -1) {
    if (swiper.realIndex == idx) {
      swiper.lazy.loadInSlide(idx);
    } else {
      swiper.params.loop ? swiper.slideToLoop(idx, 0) : swiper.slideTo(idx, 0);
    }
  }
  wraper.style.opacity = 1;
};